<!-- FilterPanel.vue -->
<template>
	<view class="filter-container">
		<!-- 顶部搜索 -->
		<slot name="header">
			<!-- <u-navbar :is-back="true" :background="navBarStyle">
				<view class="slot-wrap u-p-r-10">
					<u-search v-model="searchKey" :placeholder="searchPlaceholder" @search="emitFilter" />
				</view>
			</u-navbar> -->
		</slot>

		<!-- 筛选条件区域 -->
		<view class="bg-white">
			<u-dropdown :active-color="themeColor" :title-size="28" @open="handleDropdownOpen">
				<!-- 默认固定 -->
				<u-dropdown-item v-for="(filter, index) in defaultFilters" :key="filter.key" v-model="filterValues[filter.key]"
					:title="filter.title" :options="filter.options" @change="handleFilterChange" />
				<!-- 自定义 -->
				<u-dropdown-item v-for="(filter, index) in filters" :key="filter.key" v-model="filterValues[filter.key]"
					:title="filter.title" :options="filter.options" @change="handleFilterChange" />
			</u-dropdown>

			<!-- 时间选择 -->
			<u-calendar v-model="showCalendar" mode="range" :active-bg-color="themeColor" @change="handleDateChange" />
		</view>

		<!-- 自定义筛选内容 -->
		<slot name="custom-filter"></slot>

		<!-- 已选条件展示 -->
		<view v-if="selectedTags.length" class="selected-tags u-p-t-30 u-p-l-30 u-p-r-30">
			<u-tag v-for="(tag, index) in selectedTags" :key="index" :text="tag.text" :type="tag.type"
				@close="removeTag(tag)" mode="plain"/>
		</view>

		<!-- 底部操作 -->
		<slot name="footer"></slot>
	</view>
</template>

<script>
	export default {
		props: {
			// 筛选配置
			filters: {
				type: Array,
				default: () => []
			},
			defaultValue: {
				type: Array,
				default: () => []
			},
			themeColor: {
				type: String,
				default: '#10beca'
			},
			searchPlaceholder: {
				type: String,
				default: '关键词搜索'
			},
			navBarStyle:{
				type: Object,
				default:() => {
					return {
						backgroundColor:'#10beca'
					}
				}
			}
		},
		data() {
			return {
				defaultFilters: [
					{
						key: 'timeType',
						title: '时间筛选',
						options: [
							{
								label: '全部',
								value: 0,
							},
							{
								label: '今日',
								value: 1,
							},
							{
								label: '昨日',
								value: 2,
							},
							{
								label: '本月',
								value: 3,
							},
							{
								label: '上月',
								value: 4,
							},
							{
								label: '本季度',
								value: 5,
							},
							{
								label: '上季度',
								value: 6,
							},
							{
								label: '本年',
								value: 7,
							},
							{
								label: '上年',
								value: 8,
							},
							{
								label: '自定义日期',
								value: 9,
							}
						],
						type: 'dropdown'
					},
				],
				// 弹出时间范围选择
				showCalendar: false,
				
				filterValues: {
					// timeType: 1,
					// sort: 1
				},
				selectedTags: [],
				searchKey: '',
				chooseIndex: 0,
			}
		},
		// watch:{
		// 	filters(arr){
		// 		arr.forEach((item)=>{
		// 			this.filterValues[item.key] = null
		// 		})
		// 	}
		// },
		mounted() {
			if(this.defaultValue.length > 0){
				this.defaultValue.forEach((item)=>{
					this.filterValues[item.key] = item.default
				})
			}
		},
		methods: {
			emitFilter() {
				this.$emit('filter-change', {
					...this.filterValues,
					key: this.searchKey
					// tags: this.selectedTags
				})
			},
			handleDateChange(dates) {
				this.selectedTags= [{
					key: 'dateRange',
					text: `自定义时间筛选：${dates.startDate} 至 ${dates.endDate}`
				}]
				this.filterValues.startDate = dates.startDate
				this.filterValues.endDate = dates.endDate
				this.emitFilter()
			},
			handleDropdownOpen(index){
				console.log('handleDropdownOpen',index)
				this.chooseIndex = index
				// if(this.filterValues.timeType == 9){
				// 	this.filterValues.timeType = null
				// 	this.filterValues.startDate = ''
				// 	this.filterValues.endDate = ''
				// }
			},
			handleFilterChange(obj){
				console.log('handleFilterChange',obj)
				// 判断操作的是否为时间筛选，chooseIndex为0就是时间筛选
				if(this.chooseIndex == 0){
					if(this.filterValues.timeType == 9){
						this.showCalendar = true
					}else{
						this.selectedTags = []
						this.emitFilter()
					}
				}else{
					this.emitFilter()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .filter-container{
	// 	position: sticky;
	// 	top: 0;
	// 	z-index: 999;
	// 	/* #ifdef H5 */
	// 	top: 44px;
	// 	/* #endif */
	// }
</style>